<template>
  <el-tooltip class="item" effect="dark" placement="top-start">
    <span class="title">{{ title }}</span>
    <template #content>
      <p v-for="(item,index) in cates" :key="index">{{ item }}</p>
    </template>
  </el-tooltip>
</template>
<script>
export default {
  props: {
    datas: {
      type: Array,
      default: _ => {
        return []
      }
    },
    row: {
      type: Object,
      default: _ => {
        return {};
      }
    },
    field: {
      type: String,
      default: 'cates'
    }
  },
  computed: {
    cates() {
      return (Array.isArray(this.datas) && this.datas.length > 0) ? this.datas : this.row[this.field]
    },
    title() {
      const cates = this.cates

      return cates[0] ? cates[0] : ''
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
.title{
  @include ellipsisLine(1);
}
</style>
